I am following this tutorial: https://www.youtube.com/watch?v=iWUR04B42Hc, I know it has outdated content but I think a have translated it correctly to the latest version of Webpack, but it's giving me this error configuration.module.rules[0] has an unknown property 'query'.
Full version
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
My webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './source/app.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}
]
}
}
Do anyone know what's the problem with my code?
The error message is very clear, there is no query option on rule configuration, you should use options.presets. See usage for Webpack v5
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}